<template>
  <view class="mine tn-safe-area-inset-bottom">

    <!-- 顶部自定义导航 -->
    <tn-nav-bar :isBack="false" :bottomShadow="false" backgroundColor="none">
      <view class="custom-nav tn-flex tn-flex-col-center tn-flex-row-left" @click="tn('/minePages/set')">
        <view class="custom-nav__back">
          <view class="tn-icon-set tn-color-cat" style="font-size: 50rpx;">
          </view>
        </view>
      </view>
    </tn-nav-bar>

    <view class="top-backgroup">
      <image src='https://resource.tuniaokj.com/images/my/my-bg4.png' mode='widthFix' class='backgroud-image'>
      </image>
    </view>

    <view class="about__wrap" :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <!-- 图标logo/头像 -->
      <view class="tn-flex tn-flex-row-between tn-flex-col-center tn-margin-bottom" style="margin-top: -450rpx;">
        <view class="justify-content-item">
          <view class="tn-flex tn-flex-direction-column tn-flex-col-center">
            <view class="logo-pic tn-shadow">
              <view class="logo-image">
                <view class="tn-shadow-blur logo" :style="{'background-image':`url(${userInfo.avatarUrl})`}">
                </view>
              </view>
            </view>
            <view class="nickName">
              <text class="tn-color-cat tn-text-sm tn-text-bold">{{userInfo.nickName}}</text>
            </view>
          </view>

        </view>
        <view class="tn-flex tn-flex-direction-column tn-flex-col-center">
          <text class="tn-color-cat tn-text-sm tn-text-bold">关系等级</text>
          <view class="linkBox">
            <image src="../../static/link.png" mode=""></image>
            <image src="../../static/link.png" mode=""></image>
            <image src="../../static/link.png" mode=""></image>
          </view>
          <text class="tn-color-cat tn-text-xl tn-text-bold"><text class="tn-color-cat tn-text-sm tn-text-bold">lv </text> {{userInfo.level || 1}}</text>
        </view>

        <view class="justify-content-item logoBox">
          <view class="tn-flex tn-flex-direction-column tn-flex-col-center">
            <view class="logo-pic tn-shadow">
              <view class="logo-image">
                <view class="tn-shadow-blur logo" :style="{'background-image':`url(${userInfo.boundAvatar})`}">
                </view>

              </view>
            </view>

            <view class="nickName">
              <text class="tn-color-cat tn-text-sm tn-text-bold">{{userInfo.boundNickname}}</text>
            </view>

          </view>

        </view>
      </view>

      <!-- 没有授权，则显示这个授权按钮-->
      <!-- <view class="tn-flex tn-flex-row-between" @click="tn('/minePages/login')">
        <view class="tn-flex-1 justify-content-item tn-margin-xs tn-text-center">
          <tn-button shape="round" backgroundColor="#1D2541" fontColor="#ffffff" padding="20rpx 0" width="40%" shadow>
            <text class="tn-icon-wechat tn-padding-right-xs tn-text-xl"></text>
            <text class="">授权登录</text>
          </tn-button>
        </view>
      </view> -->

      <view class="tn-margin-top-xl">
        <view class="button-vip tn-flex tn-flex-row-between tn-flex-col-center tn-shadow-blur" style="background: linear-gradient(-120deg, #3E445A, #31374A, #2B3042, #262B3C);">

          <view class="tn-margin-left">
            <view class='title' style="color: #F1C68E;">
              <text class="tn-text-bold tn-text-xl">{{userInfo.score}} 金币</text>
            </view>
            <view class='tn-color-white tn-text-sm tn-padding-top-sm'>做任务赚取更多金币</view>
          </view>
          <view class="tn-margin-right">
            <tn-button shape="round" backgroundColor="#F1C68E" fontColor="#634738" padding="10rpx 0" width="160rpx" shadow open-type="share">
              <!-- <text class="tn-icon-vip tn-padding-right-sm tn-text-lg"></text> -->
              <text class="tn-text-bold">做任务</text>
            </tn-button>
          </view>

        </view>
      </view>

      <!-- 方式15 start-->
      <view class="tn-flex tn-flex-row-between tn-bg-white about-shadow tn-margin-top-xl">
        <view class="tn-padding-sm tn-margin-xs" @click="tn('/minePages/integral')">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center tn-margin-left">
            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #F3F2F7;color: #7C8191;">
              <view class="tn-icon-discover"></view>
            </view>
            <view class="tn-text-center">
              <text class="tn-text-ellipsis">每日签到</text>
            </view>
          </view>
        </view>
        <view class="tn-padding-sm tn-margin-xs" @click="tn('/minePages/friendDetail')">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #F3F2F7;color: #7C8191;">
              <view class="tn-icon-topics"></view>
            </view>
            <view class="tn-text-center">
              <text class="tn-text-ellipsis">好友详情</text>
            </view>
          </view>
        </view>
        <view class="tn-padding-sm tn-margin-xs" @click="tn('/minePages/withdraw')">
          <view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center tn-margin-right">
            <view class="icon15__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur" style="background-color: #F3F2F7;color: #7C8191;">
              <view class="tn-icon-money"></view>
            </view>
            <view class="tn-text-center">
              <text class="tn-text-ellipsis">去兑换</text>
            </view>
          </view>
        </view>
      </view>
      <!-- 更多信息-->

      <!-- <view class="about-shadow tn-margin-top-lg tn-margin-bottom-lg tn-padding-top-sm tn-padding-bottom-sm">
				<tn-list-cell :hover="true" :unlined="true" :radius="true" :fontSize="30">
					<button class="tn-flex tn-flex-col-center tn-button--clear-style" open-type="contact">
						<view class="icon1__item--icon tn-flex tn-flex-row-center tn-flex-col-center"
							style="color: #7C8191;">
							<view class="tn-icon-wechat-fill"></view>
						</view>
						<view class="tn-flex tn-flex-row-between" style="width: 100%;">
							<view class="tn-margin-left-sm">合作勾搭</view>
							<view class="tn-color-gray tn-icon-right"></view>
						</view>
					</button>
				</tn-list-cell>
			</view> -->

    </view>

    <view class='tn-tabbar-height'></view>

  </view>
</template>

<script>
export default {
  name: 'Mine',
  data () {
    return {
      userInfo: {}
    }
  },
  created () {
    // 先获取缓存是否已经登录
    this.getOpenId()
    console.log('222', 222)
  },
  onShow () {
    console.log('111', 111)
    var pages = getCurrentPages(); // 获取当前页面栈
    var curPage = pages[pages.length - 1]; // 当前页面
    if (curPage.data.init) {
      curPage.data.init = false;
      this.getOpenId() // A页面 method中的方法，用来刷新页面A
    }
  },
  methods: {
     // 计算等级
    getLevel () {
      // this.userInfo.exp每100为一级
      const exp = this.userInfo.exp;
      this.userInfo.level = Math.floor(exp / 100) + (exp % 100 > 0 ? 1 : 0);
    },

    // 获取小程序的缓存判断是否跳转登录页面
    getOpenId () {
      uni.login({
        success: (res) => {
          const code = res.code;
          uniCloud.callFunction({
            name: "openId",
            data: {
              code: code,
            }
          }).then(({
            result
          }) => {
            this.openId = result.openId
            console.log(this.openId, result.userInfo, '11111')
            // 没有注册过的跳转登录页面
            if (result.userInfo.length === 0) {
              uni.navigateTo({
                url: '/pages/login/login'
              })
            } else {
              this.userInfo = result.userInfo
              console.log(this.userInfo, 'this.userInfo');
            }
            this.setCookie('openId', this.openId)
            this.setCookie('userInfo', this.userInfo)
            this.getLevel()
          })
        }
      })
    },
    getUserInfo () {
      uni.showModal({
        title: '温馨提示',
        content: '亲，授权微信登录后才能正常使用小程序功能',
        success: (res) => {
          if (res.confirm) {
            uni.getUserProfile({
              desc: "获取个人信息",
              success: (res) => {
                this.userList = res.userInfo;
                this.userList.openId = this.openId
                this.setCookie('userList', this.userList)
              }
            })
          }
        }
      })
    },
    setCookie (key, data) {
      uni.setStorage({
        key: key,
        data: data,
        success: (res) => {
          console.log(res, "cg")
        },
        fail: (err) => {
          console.log(err)
        }
      })
    },
    // 跳转到图鸟官网
    navTuniaoWebsite () {
      uni.navigateToMiniProgram({
        appId: 'wxa698b1eee960632f'
      })
    },
    // 跳转到图鸟UI
    navTuniaoUI () {
      uni.navigateToMiniProgram({
        appId: 'wxf3d81a452b88ff4b'
      })
    },
    // 跳转并携带参数
    tn (e) {
      uni.navigateTo({
        url: e,
      });
    },
    // 收货地址
    navAddress () {
      uni.chooseAddress({})
    },
    // 震动跳转
    navThanks (e) {
      wx.vibrateShort();
      uni.navigateTo({
        url: '/minePages/thanks'
      })
    },
    //拨打固定电话
    callPhoneNumber () {
      uni.makePhoneCall({
        phoneNumber: "18219128888",
      });
    },
    // 复制开源地址
    copySource () {
      uni.setClipboardData({
        data: "等待上传插件市场",
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.mine {
  max-height: 100vh;
}
// .logoBox{
//   width: 170rpx;
// }
.logo {
  width: 110rpx;
  height: 110rpx;
  background-size: cover;
}

.nickName {
 max-width: 110rpx;
 margin-top: 5px;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
}

/* 底部安全边距 start*/
.tn-tabbar-height {
  min-height: 120rpx;
  height: calc(140rpx + env(safe-area-inset-bottom) / 2);
  height: calc(140rpx + constant(safe-area-inset-bottom));
}

.tn-color-cat {
  color: #1d2541;
}

.tn-bg-cat {
  background-color: #1d2541;
}

/* 自定义导航栏内容 start */
.custom-nav {
  height: 100%;

  &__back {
    margin: auto 5rpx;
    font-size: 40rpx;
    margin-right: 10rpx;
    flex-basis: 5%;
    width: 100rpx;
    position: absolute;
  }
}

/* 自定义导航栏内容 end */

/* 顶部背景图 end */

.linkBox {
  image {
    width: 50rpx;
    height: 50rpx;
    rotate: 45deg;
    margin-right: 15rpx;
  }
}

/* 用户头像 start */
.logo-image {
  width: 110rpx;
  height: 110rpx;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

.logo-pic {
  background-size: cover;
  background-repeat: no-repeat;
  // background-attachment:fixed;
  background-position: top;
  border: 8rpx solid rgba(255, 255, 255, 0.05);
  box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
  border-radius: 50%;
  overflow: hidden;
  // background-color: #FFFFFF;
}

/* 页面 start*/
.about-shadow {
  border-radius: 15rpx;
  box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
}

.about {
  &__wrap {
    position: relative;
    z-index: 1;
    margin: 20rpx 30rpx;
  }
}

/* 页面 end*/

/* 图标容器15 start */
.icon15 {
  &__item {
    width: 30%;
    background-color: #ffffff;
    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 100rpx;
      height: 100rpx;
      font-size: 60rpx;
      border-radius: 50%;
      margin-bottom: 18rpx;
      position: relative;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
      }
    }
  }
}

/* 图标容器12 start */
.tn-three {
  position: absolute;
  top: 50%;
  right: 50%;
  bottom: 50%;
  left: 50%;
  transform: translate(-38rpx, -16rpx) rotateX(30deg) rotateY(20deg)
    rotateZ(-30deg);
  text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0,
    -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
}

.icon20 {
  &__item {
    width: 30%;
    background-color: #ffffff;
    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 100rpx;
      height: 100rpx;
      font-size: 60rpx;
      border-radius: 50%;
      margin-bottom: 18rpx;
      position: relative;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
        background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
      }
    }
  }
}

.button-vip {
  width: 100%;
  height: 150rpx;
  border-radius: 15rpx;
  position: relative;
  z-index: 1;

  &::after {
    content: " ";
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    border-radius: inherit;
    opacity: 1;
    transform: scale(1, 1);
    background-size: 100% 100%;
    background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
  }
}

/* 图标容器12 start */
.icon12 {
  &__item {
    width: 30%;
    background-color: #ffffff;
    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 15rpx;
      height: 15rpx;
      font-size: 50rpx;
      border-radius: 50%;
      margin-bottom: 38rpx;
      position: relative;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
      }
    }
  }
}

/* 图标容器1 start */
.icon1 {
  &__item {
    // width: 30%;
    background-color: #ffffff;
    border-radius: 10rpx;
    padding: 30rpx;
    margin: 20rpx 10rpx;
    transform: scale(1);
    transition: transform 0.3s linear;
    transform-origin: center center;

    &--icon {
      width: 40rpx;
      height: 40rpx;
      font-size: 40rpx;
      border-radius: 50%;
      position: relative;
      z-index: 1;

      &::after {
        content: " ";
        position: absolute;
        z-index: -1;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: 0;
        border-radius: inherit;
        opacity: 1;
        transform: scale(1, 1);
        background-size: 100% 100%;
        background-image: url(https://resource.tuniaokj.com/images/cool_bg_image/icon_bg.png);
      }
    }
  }
}

/* 图标容器1 end */

/* 顶部背景图 start */
.top-backgroup {
  height: 450rpx;
  z-index: -1;

  .backgroud-image {
    width: 100%;
    height: 450rpx;
    // z-index: -1;
  }
}

/* 顶部背景图 end */
</style>